@charset "UTF-8";
/* 
 _                    _
| |                  | |
| |__   ___  __ _  __| | ___ _ __
| '_ \ / _ \/ _` |/ _` |/ _ \ '__|
| | | |  __/ (_| | (_| |  __/ |
|_| |_|\___|\__,_|\__,_|\___|_|

*/
div{
	position: relative;
	width: 435px;
	height: 773px;
	overflow: hidden;
	margin: 0 auto;
	@media screen and (max-width:435px) {
		width: 100%;
		height: 100%;
	}
	#Canvas{
		position: absolute;
		width: 435px;
		height: 773px;
		top: 50%;
		left: 50%;
		margin-top: -(773px/2);
		margin-left: -(435px/2);
		@media screen and (max-width:435px) {

		}
	}
	.DF{
		// 想不到嗎?來看看預設的吧
		display: block;
		@include transition(all 0.4s);
		position: absolute;
		bottom: 28px;
		left: 50%;
		margin-left: -(250px/2);
		width: 250px;
		height: 40px;
		color: #fff;
		line-height: 40px;
		text-align: center;
		@include border-radius(25px);
		@include box-shadow(0px 3px 4px 2px rgba(#000,0.2));
		background-color: rgba(#006FAD,0.8);
		&:hover{
			background-color: rgba(#003451,1);
		}

		&.df2{
			width: 130px;
			margin-left: 0;
			margin-left: -(130px/2);
			z-index: 500;
		}
	}
	>h1{
		@include transition(all 0.4s);
		position: absolute;
		display: block;
		width: 435px;
		height: 773px;
		top: 50%;
		left: 50%;
		margin-top: -(773px/2);
		margin-left: -(435px/2);
		opacity: 1;
		z-index: 600;
	}
	>ul{
		display: block;
		position: absolute;
		bottom:80px;
		left: 50%;
		width: 280px;
		height: 50px;
		margin-left: -(280px/2);
		z-index: 500;
		>li{
			display: block;
			width: 50px;
			height: 50px;
			@include border-radius(25px);
			margin: 0 3px;
			float: left;
			$alpha:0.6;
			&:nth-child(1){
				background-color: rgba(red,$alpha);
				&:hover{
					background-color: rgba(red,1);
				}
			}
			&:nth-child(2){
				background-color: rgba(blue,$alpha);
				&:hover{
					background-color: rgba(blue,1);
				}
			}
			&:nth-child(3){
				background-color: rgba(#FFA000,$alpha);
				&:hover{
					background-color: rgba(#FFA000,1);
				}
			}
			&:nth-child(4){
				background-color: rgba(#05C63B,$alpha);
				&:hover{
					background-color: rgba(#05C63B,1);
				}
			}
			&:nth-child(5){
				background-color: rgba(#8400FF,$alpha);
				&:hover{
					background-color: rgba(#8400FF,1);
				}
			}
			a{
				color: #fff;
				display: block;
				width: 100%;
				height: 100%;
				@include border-radius(25px);
				text-align: center;
				line-height: 50px;
				font-size: 20px;
			}
		}
	}
}
